<template>
  <div>
    <el-card class="searchLine">
      <el-form :inline="true" :model="formLog" style="margin-top:10px">
        <el-form-item label="页面标题：">
          <el-input v-model="formLog.name" placeholder="请输入页面标题" />
        </el-form-item>
        <el-form-item label="页面状态：">
          <el-select v-model="formLog.isAbled" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="更新时间：">
          <el-date-picker
            v-model="formLog.updateTime"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">
            查询
          </el-button>
          <el-button  @click="onClear">
            清空
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card>
      <el-table
        :data="tableData"
        border
        style="width: 100%;"
        stripe
      >
        <el-table-column
          fixed
          prop="pageId"
          label="页面ID"
          width="150"
        />
        <el-table-column
          prop="name"
          label="页面标题"
          width="120"
        />
        <el-table-column
          prop="pageState"
          label="页面状态"
          width="120"
        />
        <el-table-column
          prop="option"
          label="操作记录"
        />
        <el-table-column
          prop="update_time"
          label="操作时间"
          width="220"
        />
        <el-table-column
          prop="creator"
          label="操作人"
          width="220"
        />
      </el-table>
      <el-pagination
        background
        layout="sizes,prev, pager, next"
        :total="pager.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pager.pageNum"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pager.pageSize">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import {getLogList} from '@/api/log/index'
import {forEach} from 'lodash-es'
export default {
  data() {
    return {
      formLog: {
        name: '',
        isAbled: '',
        updateTime: '',
        creator:window.localStorage.getItem('username')
      },
      timeDate:{},
      pager: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      options: [{
        value: '0',
        label: '下线'
      }, {
        value: '1',
        label: '上线'
      }],
      tableData: []
    }
  },
  mounted() {
    this.onLoad()
  },
  methods: {
    onSubmit() {
      this.onLoad()
    },
    onClear() {
      this.formLog = {
        name: '',
        isAbled: '',
        updateTime: '',
        creator:window.localStorage.getItem('username')
      }
      this.onLoad()
    },
    onLoad() {
      this.formateTime()
      getLogList({
        ...this.formLog,
        ...this.timeDate,
        pageNum: this.pager.pageNum,
        pageSize: this.pager.pageSize
      }).then(res => {
        let {list, total} = res.data
        forEach(list, item => {
          item.pageState = item.is_abled ? '上线' : '下线'
        })
        this.tableData = list
        this.pager.total = total
      })
    },
    handleSizeChange(val) {
      this.pager.pageSize = val
      this.onLoad()
    },
    handleCurrentChange(val) {
      this.pager.pageNum = val
      this.onLoad()
    },
    formateTime() {
      let updateTime=this.formLog.updateTime
      if (updateTime!=''||undefined) {
        this.timeDate={
          startDate: updateTime[0],
          endDate: updateTime[1]
        }
      }else{
        this.timeDate={
          startDate: '',
          endDate: ''
        }
      }
      
    }
  }
}
</script>

<style lang="less" scoped>
.searchLine{
margin-bottom: 10px;
}
</style>
